<template>
  <div class="page">
    <List
      v-model:loading="loading"
      :finished="finished[active]"
      finished-text="没有更多了"
      @load="nextPage"
    >
      <Tabs v-model:active="active" @click-tab="clickTab">
        <Tab title="全部" name="all">
          <OrderCard
            v-for="(item, index) in orderList.all"
            :order="item"
            :key="index"
          ></OrderCard>
        </Tab>
        <Tab title="待付款" name="watPay">
          <OrderCard
            v-for="(item, index) in orderList.watPay"
            :order="item"
            :key="index"
          ></OrderCard>
        </Tab>
        <Tab title="配送中" name="delivery">
          <OrderCard
            v-for="(item, index) in orderList.delivery"
            :order="item"
            :key="index"
          ></OrderCard>
        </Tab>
        <Tab title="待评价" name="evaluate">
          <OrderCard
            v-for="(item, index) in orderList.evaluate"
            :order="item"
            :key="index"
          ></OrderCard>
        </Tab>
        <Tab title="已取消" name="cancel">
          <OrderCard
            v-for="(item, index) in orderList.cancel"
            :order="item"
            :key="index"
          ></OrderCard>
        </Tab>
      </Tabs>
    </List>
  </div>
</template>
<script lang="ts" setup>
import {
  getCancelOrderList,
  getDeliveryOrderList,
  getEvaluateOrderList,
  getOrderList,
  getWatPayOrderList,
} from "@/api/order";
import { onMounted, ref } from "vue";
import { List, Tab, Tabs } from "vant";
import OrderCard from "./components/OrderCard.vue";

const pageData = ref({
  all: {
    pageNum: 1,
    pageSize: 10,
  },
  watPay: {
    pageNum: 1,
    pageSize: 10,
  },
  delivery: {
    pageNum: 1,
    pageSize: 10,
  },
  evaluate: {
    pageNum: 1,
    pageSize: 10,
  },
  cancel: {
    pageNum: 1,
    pageSize: 10,
  },
});
const loading = ref(false);
/**结束加载 */
const finished = ref({
  all: false,
  watPay: false,
  delivery: false,
  evaluate: false,
  cancel: false,
});
const active = ref("all");

/**订单列表 */
const orderList = ref({
  all: [],
  watPay: [],
  delivery: [],
  evaluate: [],
  cancel: [],
});

const clickTab = (actived: any) => {
  const key = actived.name;
  if (orderList.value[key].length === 0 && !finished.value[key]) {
    nextPage();
  }
};

const nextPage = () => {
  loading.value = true;
  switch (active.value) {
    case "all":
      getOrderList(pageData.value[active.value]).then((res) =>
        loadByActive(res)
      );
      break;
    case "watPay":
      getWatPayOrderList(pageData.value[active.value]).then((res) =>
        loadByActive(res)
      );
      break;
    case "delivery":
      getDeliveryOrderList(pageData.value[active.value]).then((res) =>
        loadByActive(res)
      );
      break;
    case "evaluate":
      getEvaluateOrderList(pageData.value[active.value]).then((res) =>
        loadByActive(res)
      );
      break;
    case "cancel":
      getCancelOrderList(pageData.value[active.value]).then((res) =>
        loadByActive(res)
      );
      break;
  }
};

/**
 *
 *根据标签加载不同数据
 * @param {*} func 请求方法
 *
 */
const loadByActive = async (res: any) => {
  console.log(active.value, pageData.value);
  orderList.value[active.value].push(...res.rows);
  loading.value = false;
  pageData.value[active.value].pageNum += 1;
  if (
    res.total <
    pageData.value[active.value].pageNum * pageData.value[active.value].pageSize
  ) {
    finished.value[active.value] = true;
  }
};
</script>
